<template>
  <div class="home">
    <AppDownload></AppDownload>
    <div class="home-head">
      <div class="h-left" @click="region">
        <van-icon name="location" size="15" />

        <span>{{ this.$store.state.city }}</span>
      </div>
      <div class="h-center" @click="backSearch">
        <van-search shape="round" placeholder="搜索演出关键字" />
      </div>
      <div class="h-right">
        <img src="../assets/en.png" alt="" />
      </div>
    </div>

    <!-- 轮播图 开始 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#e8484a">
        <van-swipe-item v-for="(item, index) in imgArr" :key="index">
          <img :src="item.img" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 结束 -->
    <!-- 导航条 开始 -->
    <div class="content">
      <van-sticky :offset-top="0">
        <div class="nav">
          <ul class="nav-list">
            <li
              @click="navTab(index)"
              v-for="(item, index) in navArr"
              :key="index"
              :class="currentIndex == index ? 'active' : ''"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </van-sticky>
    </div>
    <!-- 导航条 结束 -->
    <Tabbars></Tabbars>

    <keep-alive>
      <component :is="mine"></component>
    </keep-alive>
  </div>
</template>

<script>
import instance from "../request/api";
//子组件集合
import Music from "../components/nav/Music.vue";
import Drama from "../components/nav/Drama.vue";
import Talk from "../components/nav/Talk.vue";
import Children from "../components/nav/Children.vue";
import Exhibition from "../components/nav/Exhibition.vue";
import Quyuan from "../components/nav/Quyuan.vue";
import AppDownload from "../components/appDownload.vue";

import Tabbars from "../components/Tabbars.vue";

export default {
  name: "Home",
  data() {
    return {
      mine: "Music",
      currentIndex: 0,

      navList: ["Music", "Drama", "Talk", "Children", "Exhibition", "Quyuan"],
      navArr: [
        "音乐演出",
        "话剧歌剧",
        "脱口秀",
        "儿童亲子",
        "展览培训",
        "曲苑杂坛",
      ],
      imgArr: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data } = await instance.get("/home.json");

      this.imgArr = data.home[0].banner;
      // console.log(this.imgArr);
    },
    navTab(index) {
      this.mine = this.navList[index];
      this.currentIndex = index;
    },
    region() {
      // 地区事件
      this.$router.push("region");
    },
    backSearch() {
      this.$router.push("search");
    },
  },
  components: {
    Music,
    Drama,
    Talk,
    Children,
    Exhibition,
    Quyuan,
    AppDownload,
    Tabbars,
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  position: relative;
  overflow: hidden;
  .home-head {
    width: 100%;
    height: 55px;
    padding: 11px 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    .h-left {
      font-size: 15px;
      padding: 0 22px;
    }
    .h-center {
      width: 60%;
      color: #ccc;
      .van-search {
        padding: 0;
      }
    }
    .h-right {
      padding: 0 22px;

      box-sizing: border-box;
      img {
        width: 17px;
        height: 16px;
        vertical-align: middle;
        margin-top: -7px;
      }
    }
  }

  .banner {
    width: 100%;
    height: 165px;
    .van-swipe-item {
      height: 165px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .content {
    width: 100%;
    position: relative;
    .nav {
      padding: 22px 22px 0px 22px;
      box-sizing: border-box;

      background: #fff;
      .nav-list {
        width: 100%;
        border-bottom: 1px solid #ebebeb;
        white-space: nowrap;
        overflow: auto hidden;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 16px;
        box-sizing: border-box;
        li {
          color: #999;
          font-size: 14px;
          margin-right: 30px;
        }
        li:last-child {
          margin: 0;
        }
        li.active {
          color: #161616;
          font-weight: 700;
          font-size: 17px;
        }
      }
    }
  }
}
</style>
